<template>
  <div class="home">
    <HomeSwiper />

    <div class="icons">
      <i-grid>
        <i-row
          v-for="(item, index) in iconList"
          :key="index">
          <i-grid-item
            v-for="(child, childIndex) in item"
            :key="child.icon"
            @click="detailClick(child)">
            <i-grid-icon i-class="home-iconsList-iviewIcon">
              <div class="home-iconsList-icon iconfont" :class="child.icon"></div>
            </i-grid-icon>
            <i-grid-label>
              <div class="home-iconsList-title">{{child.title}}</div>
            </i-grid-label>
          </i-grid-item>
        </i-row>
      </i-grid>
    </div>
  </div>
</template>

<script>
import HomeSwiper from 'components/HomeSwiper/HomeSwiper'
import { mapMutations } from 'vuex'
import { homeTenantIconList } from 'common/js/modules'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    HomeSwiper
  },
  data () {
    return {
      iconList: homeTenantIconList()
    }
  },
  methods: {
    detailClick (child) {
      if (child.link === 'contract') {
        this.SET_TITLEKEY(child.title)
      }
      wx.navigateTo({
        url: `/pages/${child.link}/main`
      })
    },
    ...mapMutations({
      'SET_TITLEKEY': 'contract/SET_TITLEKEY'
    })
  }
}
</script>

<style lang="scss">
  .home {
    > .icons {
      .home-iconsList-iviewIcon {
        width: 40px;
        height: 40px;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .home {
    > .icons {
      width: 100%;
      position: relative;
      .home-iconsList-icon {
        width: 40px;
        height: 40px;
        overflow: hidden;
        position: relative;
        border-radius: 50%;
        background-color: green;
        color: white;
        text-align: center;
        font-size: 20px;
        line-height: 40px;
        &.house {
          background-color: rgb(131, 185, 77);
        }
        &.lease {
          font-size: 24px;
          background-color: rgb(62, 140, 209);
        }
        &.bill {
          font-size: 28px;
          background-color: rgb(245, 210, 71);
        }
        &.meter {
          font-size: 24px;
          background-color: rgb(68, 152, 84);
        }
        &.contract {
          background-color: rgb(195, 123, 116);
        }
        &.person {
          font-size: 18px;
          background-color: rgb(76, 151, 207);
        }
        &.notice {
          background-color: rgb(107, 168, 181);
        }
        &.statistics {
          font-size: 17px;
          background-color: rgb(178, 205, 73);
        }
        &.setting {
          font-size: 23px;
          background-color: rgb(74, 84, 92);
        }
      }
    }
  }
</style>
